<template>
    <div style="width: 100%;height: 100%;overflow-y: auto">
        <el-collapse v-model="activeNames" class="widget-collapse">
            <el-collapse-item title="选择题" name="选择题">
                <draggable tag="ul" v-model="multiple_choice_question"
                           ghost-class="ghost"
                           :options="{
                                group:{name: 'dragGroup', pull: 'clone', put: false},
                                sort:false
                           }"
                           :clone="handleFieldWidgetClone"
                           :move="checkFieldMove"
                           >
                    <li v-for="(fld, index) in multiple_choice_question" :key="fld.type" class="field-widget-item"
                        :title="fld.displayName"
                    >
                        <span class="color-span-icon"><span class="iconfont" :class="fld.icon"
                                                            style="margin-right: 5px"></span>{{
                            fld.displayName
                            }}</span>
                    </li>
                </draggable>
            </el-collapse-item>
            <el-collapse-item title="填空题" name="填空题">
                <draggable tag="ul" :list="gap_filling_question" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                            ghost-class="ghost" :sort="false" :clone="handleFieldWidgetClone" :move="checkFieldMove">
                    <li v-for="(fld, index) in gap_filling_question" :key="fld.type" class="field-widget-item"
                        :title="fld.displayName"
                    >
                        <span class="color-span-icon"><span class="iconfont" :class="fld.icon"
                                                            style="margin-right: 5px"></span>{{
                            fld.displayName
                            }}</span>
                    </li>
                </draggable>
            </el-collapse-item>
            <el-collapse-item title="评分量表题" name="评分量表题">
                <draggable tag="ul" :list="score_question" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                            ghost-class="ghost" :sort="false" :clone="handleFieldWidgetClone" :move="checkFieldMove">
                    <li v-for="(fld, index) in score_question" :key="fld.type" class="field-widget-item"
                        :title="fld.displayName"
                    >
                        <span class="color-span-icon"><span class="iconfont" :class="fld.icon"
                                                            style="margin-right: 5px"></span>{{
                            fld.displayName
                            }}</span>
                    </li>
                </draggable>
            </el-collapse-item>
<!--            <el-collapse-item title="分段布局" name="分段布局">-->
<!--                <draggable tag="ul" :list="duanluoObj" :group="{name: 'dragGroup', pull: 'clone', put: false}"-->
<!--                           ghost-class="ghost" :sort="false" :clone="handleFieldWidgetClone" :move="checkFieldMove">-->
<!--                    <li v-for="(fld, index) in duanluoObj" :key="fld.type" class="field-widget-item"-->
<!--                        :title="fld.displayName"-->
<!--                    >-->
<!--                        <span class="color-span-icon"><span class="iconfont" :class="fld.icon"-->
<!--                                                            style="margin-right: 5px"></span>{{-->
<!--                                fld.displayName-->
<!--                            }}</span>-->
<!--                    </li>-->
<!--                </draggable>-->
<!--            </el-collapse-item>-->
            <el-collapse-item title="通用题型" name="通用题型">
                <draggable tag="ul" :list="tongyong_ti" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                           ghost-class="ghost" :sort="false" :clone="handleFieldWidgetClone" :move="checkFieldMove">
                    <li v-for="(fld, index) in tongyong_ti" :key="fld.type" class="field-widget-item"
                        :title="fld.displayName"
                    >
                        <span class="color-span-icon"><span class="iconfont" :class="fld.icon"
                                                            style="margin-right: 5px"></span>{{
                                fld.displayName
                            }}</span>
                    </li>
                </draggable>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
import {
    multiple_choice_question,
    gap_filling_question,
    score_question,
    tongyong_ti,
} from '@/components/form-designer/widget-panel/widgetsConfig'
import {containerConfigList} from '@/components/form-designer/container-panel/containerConfig'
import Draggable from 'vuedraggable'
import {uuid} from "vue-uuid";

export default {
    name: "index",
    components: {
        Draggable
    },
    data() {
        return {
            activeNames: ['选择题', '填空题', '评分量表题', '分段布局', '通用题型', '个人信息'],
            multiple_choice_question: multiple_choice_question,
            gap_filling_question: gap_filling_question,
            score_question: score_question,
            tongyong_ti:tongyong_ti,
        }
    },
    created() {
        this.activeNames = ['选择题', '填空题', '评分量表题', '分段布局', '通用题型', '个人信息']
    },
    methods: {
        handleFieldWidgetClone(origin) {
            let newWidget = JSON.parse(JSON.stringify(origin))
            let tempId = uuid.v4()
            newWidget.id = tempId
            newWidget.options.name = newWidget.options.label + '_' + newWidget.id
            newWidget.options.label = newWidget.options.label || newWidget.type.toLowerCase()
            return {
                ...newWidget
            }
        },
        checkFieldMove(evt){
            if (!!evt.draggedContext && !!evt.draggedContext.element) {
                let wgType = evt.draggedContext.element.type + ''
                if (!!evt.to) {
                    if ((evt.to.className === 'sub-form-table') && (wgType === 'slot')) {
                        return false
                    }
                }
            }
            return true
        }
    }
}
</script>
<style scoped lang="scss">
.widget-collapse {
  ::v-deep .el-collapse-item__content {
    padding-bottom: 6px;

    ul {
      padding-left: 10px; /* 重置IE11默认样式 */
      margin: 0; /* 重置IE11默认样式 */
      margin-block-start: 0;
      margin-block-end: 0.25em;
      padding-inline-start: 10px;

      &:after {
        content: "";
        display: block;
        clear: both;
      }

      .container-widget-item, .field-widget-item {
        height: 32px;
        line-height: 32px;
        width: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        margin: 2px 6px 6px 0;
        cursor: move;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background: #fff;
        border: 1px solid #a0d3f5;
        border-radius: 4px;
        padding: 0 8px;
      }

      .container-widget-item:hover, .field-widget-item:hover {
        background: #F1F2F3;
        border-color: $--color-primary;

        .color-span-icon {
          color: $--color-primary;
        }
      }

      .drag-handler {
        position: absolute;
        top: 0;
        left: 160px;
        background-color: #dddddd;
        border-radius: 5px;
        padding-right: 5px;
        font-size: 11px;
        color: #666666;
      }
    }
  }
}
.ghost{
    content: '';
    font-size: 0;
    height: 3px;
    box-sizing: border-box;
    background: $--color-primary;
    border: 2px solid $--color-primary;
    outline-width: 0;
    padding: 0;
    overflow: hidden;
}
</style>
